<template>
	<view>
		<view class="padding" style="background-color: #FFFCE1; color: #FF7408;">实名认证成功可体现</view>
		<view class="input-item">
			<view class="title-left">真实姓名</view>
			<input type="text" value="" placeholder="请输入真实姓名" placeholder-style="color:#CCCCCC;font-size:30rpx"  />
		</view>
		<view class="input-item phone-vali">
			<view class="title-left">手机号码</view>
			<input type="text" value="" placeholder="请输入手机号" placeholder-style="color:#CCCCCC;font-size:30rpx" />
			<view class="get-vali-Code" v-if="!sendCode" @tap="getCode">获取验证码</view>
			<view class="get-vali-Code" v-else>
				{{timer}}
			</view>
		</view>
		<view class="input-item">
			<view class="title-left">验证码</view>
			<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#CCCCCC;font-size:30rpx" />
		</view>
		<view class="input-item">
			<view class="title-left">身份证号</view>
			<input type="text" value="" placeholder="请输入身份证号" placeholder-style="color:#CCCCCC;font-size:30rpx" />
		</view>
		
			<view class="image-view" style="height: 400rpx;">
				<view class="" style="padding: 20rpx;">上传身份证</view>
				<view class="img-info" >
					<view class="img-item" >
						<view class="img-src" style="background-color: #F1F1F1;">
							<image style="" src="https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605929782161.jpg" mode=""></image>
						</view>
						<view class="title" >上传身份证正面</view>
					</view>
					<view class="img-item" >
						<view class="img-src" style="background-color: #F1F1F1;">
							<image style=""  src="https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605929782161.jpg" mode=""></image>
						</view>
						<view class="title">上传身份证正面</view>
					</view>
				</view>
			</view>  
			<view class="main-bg-color padding-y-20 margin-y-20" style="width: 95%; text-align: center;color: #FFFFFF; position: absolute;left: 50%;transform: translate(-50%,0);border-radius: 10rpx;">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sendCode:false,
				timer:60
			}
		},
		methods: {
			getCode(){
				this.sendCode=true;
				let setTimer=setInterval(()=>{
					if(this.timer==0){
						this.sendCode=false;
						clearInterval(setTimer);
					}else{
						this.timer--;
					}
				},1000)
			}
		}
	}
</script>

<style lang="less">
	body{
		background-color: #F1F1F1;
	}
	.input-item{
		display: flex;
		align-items: center;
		border-top: 1rpx solid #F1F1F1;
		font-size: 30rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		.title-left{
			width: 180rpx;
			text-align: center;
		}
	}
input{
	font-size: 30rpx;
	color: #CCCCCC;
}
.phone-vali{
	position: relative;
	.get-vali-Code{
		padding: 10rpx 30rpx;
		border: 1rpx solid #FEB506;
		border-radius: 50rpx;
		color: #FEB506;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		
	}
}

.image-view{
	width: 100%;
	background-color: #FFFFFF;
	margin-top: 20rpx;
	 
}

.img-info{
	padding:0 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.img-item{
		width: 48%;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		.img-src{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 140rpx; 
				height: 100rpx;
			}
		}
		.title{
			background-color: #484848;
			height: 50rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
}
</style>
